<template>
  <div>
    <el-form size="small" ref="dataForm" label-width="120px" :model="dataForm" :rules="rules">
      <el-row>
        <el-col>
          <el-form-item prop="organizationId" label="机构:">
            <organization-cascader :flag="'id'" v-model="dataForm.organizationId" :placeholder="'请选择受理人机构'"></organization-cascader>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="指定调查专员:">
            <ul class="tag-list" @click="clickTagUser('add')">
              <li class="tag-item" v-for="(item, index) of listValue" :key="index">{{item.realName}}({{item.userName}})</li>
            </ul>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :offset="16">
        <el-button type=""  @click="closeEdit">
          取消
        </el-button>
        <el-button type="primary"  @click="saveData">
          <fa-icon class="fa-check" />确定
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import OrganizationCascader from '@/components/organizationCascader'
export default {
  components: { OrganizationCascader },
  name: 'edit-inves',
  props: {
    listValue: Array
  },
  data () {
    return {
      dataForm: {
        organizationId: '',
        userId: []
      },
      rules: {
        organizationId: [{ required: true, message: '请选择调查机构', trigger: 'change' }]
      }
    }
  },
  mounted () {},
  methods: {
    // 保存
    saveData () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          let ids = this.listValue.map(ele => ele.userId)
          this.dataForm.userId = [...ids]
          this.$emit('updataSuccess', this.dataForm)
        }
      })
    },
    clickTagUser (type) {
      this.$emit('showType', type)
    },
    closeEdit () {
      this.$emit('close', false)
    }
  }
}
</script>
<style lang="less" scoped>
.tag-list{
  width: 100%;
  min-height: 40px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #DCDFE6;
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 5px 0;
  .tag-item{
    display: inline-block;
    box-sizing: border-box;
    padding: 2px 10px;
    font-size: 12px;
    border: 1px solid #DCDFE6;
    margin: 0 5px 5px 5px;
    line-height: 22px;
    border-radius: 4px;
  }
}
</style>
